import * as THREE from "three";
import { BufferAttribute, TextureLoader } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

var w = window.innerWidth, h = window.innerHeight
var camera, scene, renderer, mesh
const CUBE_DIR = 'static/sky/';
const CUBE_FILES = [
  'TropicalSunnyDayLeft2048.png',
  'TropicalSunnyDayRight2048.png',
  'TropicalSunnyDayUp2048.png',
  'TropicalSunnyDayDown2048.png',
  'TropicalSunnyDayFront2048.png',
  'TropicalSunnyDayBack2048.png',
];

function init() {
  scene = new THREE.Scene()
  scene.background = new THREE.CubeTextureLoader().setPath(CUBE_DIR).load(CUBE_FILES);

  camera = new THREE.PerspectiveCamera(45, w / h, 1, 10000)
  camera.position.set(0, 60, 600)
  camera.up.y = 1
  // camera.lookAt(scene.position)

  renderer = new THREE.WebGLRenderer()
  // renderer.setClearColor(0x3f5e6a)
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap
  renderer.setSize(w, h)
  document.body.appendChild(renderer.domElement)
  createGeometry()
  createLight()
}
var texture2
function createGeometry() {
  var geometry = new THREE.BoxBufferGeometry(80,80,80)
  var material = new THREE.MeshLambertMaterial({color:0x3e4d5f})
  var mesh1 = new THREE.Mesh(geometry,material)
  var mesh2 = new THREE.Mesh(geometry,material)
  mesh1.position.x = -80
  mesh2.position.x = 80
  scene.add(mesh1)
  scene.add(mesh2)

  var path = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( -80, 30,0 ),
    new THREE.Vector3( -60, 100 ,0),
    new THREE.Vector3( 60, 100 ,0),
    new THREE.Vector3( 80, 30 ,0),
  ] );

  var geometry2 = new THREE.TubeGeometry( path, 40, 5, 8, false );
  

  new THREE.TextureLoader().load(
    '/static/zebra.jpg',
    (texture)=>{
      texture2 = texture
      texture2.wrapS = THREE.RepeatWrapping
      texture2.wrapT = THREE.RepeatWrapping
      texture2.repeat.x = 15
      var material2 = new THREE.MeshPhongMaterial( { color : 0xffffff ,map:texture2} );
      var mesh3 = new THREE.Mesh(geometry2,material2)
      scene.add(mesh3)
      animate()
    }
  )
  
}
var light2
function createLight(){
  var light1 = new THREE.AmbientLight(0xffffff,0.1)
  scene.add(light1)

  light2 = new THREE.DirectionalLight(0xffffff,0.8)
  light2.position.set(0,30,130)
  light2.castShadow = true
  light2.shadow.camera.left = -w/2
  light2.shadow.camera.right = w/2
  light2.shadow.camera.top = -h/2
  light2.shadow.camera.bottom = h/2
  
  scene.add(light2)

  var light3 = new THREE.DirectionalLight(0xffffff,0.8)
  light3.position.set(-50,130,-30)
  scene.add(light3)
}
THREE.MeshPhongMaterial
function animate() {
  if(texture2){
    // console.log('texture2',texture2);
    
    texture2.offset.x += 0.03
  }
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
 
}

init()
animate()
// /** --------------------鼠标控件对象--------------------- */
let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", animate); //监听鼠标、键盘事件
